<template>
  <div v-if="show" class="fixed inset-0 z-100 flex items-center justify-center" style="z-index: 9999;">
    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" @click="close"></div>
    <div class="relative bg-white rounded-2xl p-8 max-w-md w-full mx-4 shadow-2xl transform transition-all">
      <div class="text-center">
        <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
          <i class="fa fa-check text-green-500 text-4xl"></i>
        </div>
        <h3 class="text-2xl font-bold mb-4">{{ title }}</h3>
        <p class="text-gray-600 mb-6">
          {{ message }}
        </p>
        <button @click="close" class="w-full bg-primary hover:bg-primary/90 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-300">
          确定
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SuccessModal',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '提交成功'
    },
    message: {
      type: String,
      default: '感谢您的咨询，我们的专业顾问将尽快与您联系'
    }
  },
  watch: {
    show(newVal) {
      if (newVal) {
        // 弹窗显示时，禁止页面滚动
        document.body.style.overflow = 'hidden'
        document.documentElement.style.overflow = 'hidden'
      } else {
        // 弹窗关闭时，恢复页面滚动
        document.body.style.overflow = 'auto'
        document.documentElement.style.overflow = 'auto'
      }
    }
  },
  methods: {
    close() {
      this.$emit('close')
    }
  }
}
</script>